<template>
  <div class="tation">
    <heads title="申请转诊"></heads>
      <div class="nav">
        <div class="theDoctor">
          <p>申请医生</p>
        <input v-model="input" placeholder="医院"/>
        <input v-model="input" placeholder="科室"/>
        <input v-model="input" placeholder="内容"/>
        </div>
        <div class="theDoctor">
       <p>申请转入科室</p>
       <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
  </el-select>
        </div>
        <div class="theDoctor">
          <p>预约转诊时间</p>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="theDoctor">
          <p>门诊类型</p>
          <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
  </el-select>
        </div>
        <div class="theDoctor">
          <p>患者基本信息</p>
        <input v-model="input" placeholder="输入患者姓名"/>
        <input v-model="input" placeholder="输入患者手机"/>
        </div>
        <div class="theDoctor">
          <p>转诊备注</p>
        <input v-model="input" placeholder="填写您的特殊要求"/>
        </div>
        <div class="complete">
            <button @click="Thedd">预约</button>
        </div>
      </div>  

      </div>      

</template>

<script> 
import heads from '@/components/heads/heads.vue'
export default {
  components:{heads},
    data() {
    return {
        input:'',
        options: [{
          value: '选项1', 
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        // 时间
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''

      }

      },
      methods:{
        Thedd(){
          // 跳转到患者详情
          this.$router.push({
            path:'/details'
          })
        }
      },
      mounted(){
        console.log(this.$router);
      }
    }
  

</script>

<style lang="less" scoped>
.block{
  width: 100%;
}
.el-select{
  width: 100%;
}
input{
  width: 100%;
  border: 0;
  border-bottom: .0625rem solid #f2f2f2;
  height: 1.875rem;
}
.head{
    height: 4.375rem;
}
.nav{
  margin: auto;
  width: 21.25rem;
  height:720px;
    .theDoctor{
      
      p{
        margin: 1.25rem 0 1.25rem .375rem;
        font-size: .9375rem;
        color: #999999;
      }
      .input{
        border: 0;
        width: 100%;
      }
      select{
        width: 100%;
        border: none;
        border-bottom: .0625rem solid #f2f2f2;
        outline: none;
        margin-left:.375rem ;
        appearance: none;
      }
    }
}
.complete{
  height: 2.5rem;
  display: flex;
  justify-content: center;
  button{
    width: 8.75rem;
    height: 2.5rem;
    background: #169bd5;
    border: 0;
    color: #fff;
    margin-top: 2.5rem;
    border-radius: .3125rem;
  }
}
</style>